<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <!--04课 01:02:46-->
    <body>
        <div id="app">

        </div>
        <script type="text/javascript" src="./vue.js"></script>
        <script type="text/javascript">
            var App = {
                data() {
                    return {
                        isShow: false
                    }
                },
                template: '' +
                    '<div class="app">' +
                    '<input type="text" v-show="isShow" ref="input">' +
                    '</div>',
                mounted() {
                    this.isShow = true;
                    console.log(this.$refs.input)

                    //在DOM更新的时候 $nextTick()是在DOM更新循环结束之后执行回调函数，
                    //在修改数据之后使用此方法在回调中获取到更新之后的DOM
                    //直接this.$refs.input.focus(); 无法获取焦点

                    this.$nextTick(function() { //也可以使用()=>代替function()
                        console.log(this);
                        this.$refs.input.focus();
                    })


                }
            }


            new Vue({
                el: '#app',
                data() {
                    return {}
                },
                template: '<App/>',
                components: {
                    App
                }

            })
        </script>
    </body>
</html>